<template>
  <div class="app-container">
    <div class="mapDiv">
      <!--地图-->
      <IndexModelMap
        @returnSetPage="returnSetPage"
        @showEvaluateResultSelect="showEvaluateResultSelect"
        @closeLegend="closeLegend"
        @isDataLayer="isDataLayer"
        @getLegendHtml="getLegendHtml"
        @showImgcreate="showImgcreate"
        @mapLoading="mapLoading"
        :estimateTool="estimateTool"
        :estimateModelType="estimateModelType"
        :taskRegion="taskRegion"
        :takId="takId"
        :slopeVersionId="slopeVersionId"
        :lithologyVersion="lithologyVersion"
        :addLayerData="addLayerData"
        :taskGoem="taskGoem"
      >
      </IndexModelMap>
      <!--抗震能力分布烈度面板-->
      <div v-if="showSeismicCapacityDistributionBool==true" class="earthquakeLevelAngleRadioSelectDiv" style="width:287px;">
        <div style="width: 20%;">
          <span style="font-size: 14px;font-weight: bold;">烈度</span>
        </div>
        <el-radio-group v-model="intensitySelect" @change="radioIntensitySelect" style="float: right;width: 80%;margin-top: -25px;">
          <el-radio v-for="item in intensityLegendData" :key="item.value" :label="item.value" :value="item.value">
            {{item.name}}
          </el-radio>
        </el-radio-group>
      </div>
      <div v-if="transcendProbabilityBool==true" class="earthquakeLevelAngleRadioSelectDiv" style="width:364px;padding: 15px 0 10px 15px;">
        <div style="width: 30%;">
          <span style="font-size: 14px;font-weight: bold;">50年超越概率：</span>
        </div>
        <el-radio-group v-model="probabilityData" @change="radioIntensitySelect" style="float: right;width: 66%;margin-top: -25px;">
          <el-radio v-for="item in probabilityLegendData" :key="item.value" :label="item.value" :value="item.value" :disabled="!route.query.pga.includes(item.value)">
            {{item.name}}
          </el-radio>
        </el-radio-group>
      </div>
      <!-- 数据图层显示 -->
      <div class="dataLayer" v-show="openLayer">
        <!-- <el-tree :data="dataLayer" :props="defaultProps" show-checkbox @check-change="handleNodeClick" /> -->
        <el-tree :data="dataLayer" show-checkbox @check-change="handleNodeClick" />
      </div> 
      <!--图层图例-->
      <div v-if="showHideLegendDivBool" class="layerMap-legend">
        <el-scrollbar max-height="500px">
          <p>图例</p>
          <div v-for="item in layerShowHideArray" :key="item.code" v-show="item.show" v-html="item.legendHtml">
          </div>
        </el-scrollbar>
      </div>
      <!--生成图件-->
      <PrintMap v-if="showImgcreateBool"
                :open="showImgcreateBool" :taskId="result.taskId"
                :mapLevel1Category="result.mapLevel1Category" :mapLevel2Category="result.mapLevel2Category"
                :legendSetList="result.legendSetList" :tempLayersSetList="result.tempLayersSetList"
                :printImgTitle="printImgTitle"
                @closeImgDialog="closeImgDialog"
      ></PrintMap>
      <!--评估结果图层图例-->
      <!-- <div v-if="showEvaluateResultBool" class="new-evaluateResultDiv">
        <div style="text-align: center;">
          <span style="font-size: 14px;font-weight: bold;color: rgb(16, 124, 229);">图例</span>
        </div>
        <div v-if="andslideRiskLegend" style="text-align: center;height: 20px;">
          <span style="font-size: 14px;font-weight: bold;color: rgb(16, 124, 229);">{{ evaluateResultLegendTitle }}</span>
        </div>
        <template v-for="item in evaluateResultLegendData">
          <div>
            <div v-if="item.name!='滑坡点' && item.name != '历史滑坡'"><div style="border-color:gray;" :style="{'background-color': item.color}" class="new-legendDiv-polygon"></div></div>
            <div v-else style="padding-left: 8px;"><div style="border-color:gray;border-radius:60px;width:14px;" :style="{'background-color': item.color}" class="new-legendDiv-polygon"></div></div>
            <span>{{ item.name }}</span>
          </div>
        </template>
      </div> -->
    </div>
  </div>
</template>
<script setup name="indexModelMapSelect">
//地图
import IndexModelMap from '@/map/slideAssess/analysisAssess/indexModelMap.vue';
import PrintMap from '@/map/slideAssess/distributionPatternAnalysis/printMap.vue';
import { detailTask } from "@/api/taskmanage/task";
import { getDataByTaskId2 } from '@/api/slideAssess/indexModel';
import { getDataByTaskId3 } from '@/api/slideAssess/logisti';
import { getDataByTaskId4 } from '@/api/slideAssess/loessPlateau'
import { getDataByTaskId1 } from '@/api/slideAssess/levelAnalyse'
import { getDataByTaskId5 } from '@/api/slideAssess/newMark'
import { iServerHttp } from "@/map/projMap.js"
import { ref } from 'vue';
const route = useRoute();
const router = useRouter();
const { proxy } = getCurrentInstance();
const addLayerData = ref({})// 添加图层数据
const openLayer = ref(false)// 打开数据图层
const estimateModelType = ref('')// 模型的类型 层次/指数/逻辑斯蒂/黄土/Newmark
const showSeismicCapacityDistributionBool = ref(false)// 打开烈度面板
const transcendProbabilityBool = ref(false)// 超越概率面板
const andslideRiskLegend = ref(false)
const taskRegion = ref("");//获取任务的烈度等级
const takId = ref("")// 任务ID
const slopeVersionId = ref("")// 坡度数据版本
const lithologyVersion = ref("")// 地层岩性版本
//评估结果图层图例范围
const evaluateResultLegendData = ref([]);
const indexModelLegend = ref([ // 手动创建图层图例 指数模型 || 逻辑斯蒂模型
  {code:"0",name:"极低危险",color:"rgba(56,167,0,0.8)"},
  {code:"1",name:"低危险",color:"rgba(139,209,0,0.8)"},
  {code:"2",name:"中危险",color:"rgba(255,253,3,0.8)"},
  {code:"3",name:"高危险",color:"rgba(255,127,0,0.8)"},
  {code:"4",name:"极高危险",color:"rgba(254,0,0,0.8)"},
])
// 黄土高原模型图例
const loessPlateauLegend = ref([
  {code:"0",name:"历史滑坡",color:"rgba(136,134,147,0.8)"},
  {code:"1",name:"极低危险",color:"rgba(242,205,220,0.8)"},
  {code:"2",name:"低危险",color:"rgba(179,194,176,0.8)"},
  {code:"3",name:"中危险",color:"rgba(252,216,174,0.8)"},
  {code:"4",name:"高危险",color:"rgba(252,111,137,0.8)"},
])
//抗震能力分布--烈度选择
const intensitySelect = ref("6");
const probabilityData = ref('a1') // 超越概率选择的值
const showHideLegendDivBool = ref(false);//是否显示图例
const evaluateResultLegendTitle = ref("滑坡风险");//评估结果图例名称
const showEvaluateResultBool = ref(true)
const showImgcreateBool = ref(false)
const estimateTool = ref(false)// 初始化打开评估结果
//抗震能力分布--烈度范围
const intensityLegendData = ref([
  {code:"0",name:"Ⅵ",value:"6"},
  {code:"1",name:"Ⅶ",value:"7"},
  {code:"2",name:"Ⅷ",value:"8"},
  {code:"3",name:"Ⅸ",value:"9"},
  {code:"4",name:"Ⅹ",value:"10"},
  {code:"4",name:"Ⅺ",value:"11"},
]);
// 超越概率 --概率选择
const probabilityLegendData = ref([
  {code:"0",name:"2%",value:"a1"},
  {code:"1",name:"10%",value:"a2"},
  {code:"2",name:"63%",value:"a3"},
])
const closeLegend = () => {
  showHideLegendDivBool.value = false
}
//显示隐藏评估结果选择面板
const showEvaluateResultSelect = (bool)=>{
  if(bool){
    if(route.query.modelType == '指数模型' || route.query.modelType == '逻辑斯蒂模型'){
      showSeismicCapacityDistributionBool.value = true// 打开烈度面板
    }else{
      transcendProbabilityBool.value = true// 超越概率面板
    }
    // showHideLegendDivBool.value = true// 图例面板
    showEvaluateResultBool.value = true
    showHideLegendDivBool.value = false
    radioIntensitySelect()
  } else{
    //清空评估结果选择
    taskRegion.value = ''
    showEvaluateResultBool.value = false
    showSeismicCapacityDistributionBool.value = false
    transcendProbabilityBool.value = false
    // showHideLegendDivBool.value = false
  }
}
const isDataLayer = (flag)=>{// 是否显示数据图层列表
  openLayer.value = flag
}
const returnSetPage = (bool)=>{//返回设定地震
  if(route.query.modelType == '指数模型') {
    router.push({ path: "/analysisAssess/indexModel",
      query: { taskId: route.query.taskId,modelType: '3',metaTitle: "指数模型"} 
    })
  }else if(route.query.modelType == '逻辑斯蒂模型') {
    router.push({
      path: '/analysisAssess/logisti',
      query: { taskId: route.query.taskId,modelType: '4',metaTitle: "逻辑斯蒂模型"} 
    })
  }else if(route.query.modelType == '层次分析模型'){
    router.push({ 
      path: "/analysisAssess/levelAnalyse",
      query: { taskId: route.query.taskId,modelType: '1',metaTitle: "层次分析模型"} 
    })
  }else if(route.query.modelType == '黄土高原模型') {
    router.push({ 
      path: "/analysisAssess/loessPlateau",
      query: { taskId: route.query.taskId,modelType: '2',metaTitle: "黄土高原模型"} 
    })
  }else if(route.query.modelType == 'Newmark模型') {
    router.push({ 
      path: "/analysisAssess/newMark",
      query: { taskId: route.query.taskId,modelType: '5',metaTitle: "Newmark模型"} 
    })
  } else if(route.query.modelType == '地层岩性') {
    if(route.query.modelLabel == '层次分析模型') {
      router.push({ 
		  	path: "/analysisAssess/levelAnalyse",
        query: { taskId: route.query.taskId,modelType: '1',metaTitle: "层次分析模型"} 
		  })
    }else{
      router.push({ 
        path: "/analysisAssess/newMark",
        query: { taskId: route.query.taskId,modelType: '5',taskDistrict: route.query.taskDistrict,metaTitle: "Newmark模型"} 
      })
    }
  }
}
const printImgTitle = ref("");//图件标题
const showImgcreate = (obj)=> {
  showImgcreateBool.value = obj.bool
  if(route.query.modelType == '指数模型' || route.query.modelType == '逻辑斯蒂模型') {
    result.value.mapLevel1Category = "7",
    result.value.mapLevel2Category = "11"
  } else if(route.query.modelType == '层次分析模型' || route.query.modelType == 'Newmark模型'){
    result.value.mapLevel1Category = "7",
    result.value.mapLevel2Category = "13"
  }else if(route.query.modelType == '黄土高原模型') {
    result.value.mapLevel1Category = "7",
    result.value.mapLevel2Category = "12"
  }
  result.value.legendSetList = [
    {
      name: obj.name,
      url: obj.url
    },
    {
      name: 'district_boundary_china@fxfzypg',
      url: iServerHttp() + '/iserver/services/map-fxfzypg/rest/maps/district_boundary_china@fxfzypg'
    }
  ],//图层（临时图层）url列表--用于显示图例
  result.value.tempLayersSetList = [
    {
      name: obj.name,
      url: obj.url
    },
    {
      name: 'district_boundary_china@fxfzypg',
      url: iServerHttp() + '/iserver/services/map-fxfzypg/rest/maps/district_boundary_china@fxfzypg'
    }
  ]//图层（临时图层）url列表--用于显示图层
  
}
//关闭生成图件窗口
const closeImgDialog = (bool)=>{
  showImgcreateBool.value = false;
}
const data = reactive({// 图层列表数据
  dataLayer: [
    // {id: 1,label: '高程数据'},
    // {id: 2,label: '坡度数据'},
    // {id: 3,label: '坡向数据'},
    // {id: 4,label: '活断层'},
    // {id: 5,label: '道路数据'},
    // {id: 6,label: '水系数据'},
    // {id: 7,label: '地层岩性数据'},
    // {id: 8,label: '地震动峰值加速度'},
    {id: 9,label: '地貌数据', name: '地貌数据', radioLabel: 'dm', code: 'dm', table:"dzzh_sys_landform",url:iServerHttp()+"/iserver/services/map-fxfzdzzh/rest/maps/dzzh_sys_landform@fxfzdzzh",zIndex:6,fieldId:"dsl_id"},
    {id: 10,label: '天然密度数据', name: '天然密度数据', radioLabel: 'trmd', code: 'trmd', table:"dzzh_sys_natural_density",url:iServerHttp()+"/iserver/services/map-fxfzdzzh/rest/maps/dzzh_sys_natural_density@fxfzdzzh",zIndex:6,fieldId:"dsn_id"},
  ],
  result:{
    taskId: route.query.taskId,//任务ID
    mapLevel1Category:"",//一级图件分类
    mapLevel2Category:"",//二级图件分类
    legendSetList:[],//图层（临时图层）url列表--用于显示图例
    tempLayersSetList:[],//图层（临时图层）url列表--用于显示图层
  },
})
let {
  dataLayer, result
} = toRefs(data);

function radioIntensitySelect(){
  takId.value = route.query.taskId
  taskRegion.value = ''
  // mapLoading("正在查询，请稍候...");
  if(showSeismicCapacityDistributionBool.value){//抗震能力分布烈度选择事件
    slopeVersionId.value = route.query.slopeVersion
    evaluateResultLegendData.value = indexModelLegend.value
    andslideRiskLegend.value = true
    if(route.query.modelType == '指数模型') {
      getDataByTaskId2({taskId: route.query.taskId, dzIntensity: intensitySelect.value}).then(res => {
        taskRegion.value = res.data[0].filePath
      }).catch()
    }else if(route.query.modelType == '逻辑斯蒂模型') {
      getDataByTaskId3({taskId: route.query.taskId, dzIntensity: intensitySelect.value}).then(res => {
        taskRegion.value = res.data[0].filePath
      }).catch()
    }
    if(route.query.modelType == '指数模型' || route.query.modelType == '逻辑斯蒂模型') {
      //设置图件标题
      let intensity = intensitySelect.value;
      let intensityList = intensityLegendData.value;
      for(let i=0;i<intensityList.length;i++){
        if(intensityList[i].value==intensity){
          intensity = intensityList[i].name;
          break;
        }
      }
      printImgTitle.value = intensity + "度地震滑坡风险分布图";
    }
  }else if(transcendProbabilityBool.value = true) {//超越概率选择事件
    // andslideRiskLegend.value = false
    if(route.query.modelType == '层次分析模型'){
      evaluateResultLegendData.value = indexModelLegend.value
      getDataByTaskId1({taskId: route.query.taskId, proExceed: probabilityData.value}).then(res => {
        taskRegion.value = res.data[0].filePath
      }).catch()
    }else if(route.query.modelType == '地层岩性') {
      lithologyVersion.value = route.query.lithologyVersion
      transcendProbabilityBool.value = false
      showHideLegendDivBool.value = false
      setTimeout(() => {
        taskRegion.value = '地层岩性'
      }, 1000)
    }else if(route.query.modelType == '黄土高原模型') {
      evaluateResultLegendData.value = loessPlateauLegend.value
      getDataByTaskId4({taskId: route.query.taskId, proExceed: probabilityData.value}).then(res => {
        taskRegion.value = res.data[0].filePath
      }).catch()
      //设置图件标题
      let probability = probabilityData.value;
      let probabilityList = probabilityLegendData.value;
      for(let i=0;i<probabilityList.length;i++){
        if(probabilityList[i].value==probability){
          probability = probabilityList[i].name;
          break;
        }
      }
      printImgTitle.value = "黄土高原50年超越概率"+probability+"地震滑坡危险等级评价图";
    }else if(route.query.modelType == 'Newmark模型') {
      getDataByTaskId5({taskId: route.query.taskId, proExceed: probabilityData.value}).then(res => {
        taskRegion.value = res.data[0].filePath
      }).catch()
    }
  }
}
const layerShowHideArray = ref([]);//图层是否显示数组
//图例
const getLegendHtml = (obj)=>{
  if(obj!=null){
    layerShowHideArray.value = [{
      name: obj.name,
      show: obj.show,
      legendHtml: obj.legendHtml
    }];
    showEvaluateResultBool.value = false
    showHideLegendDivBool.value = obj.show;// 打开图例面板
  }
}
function handleNodeClick (row,flag){// 数据图层点击事件
  let params = {
    data: row,
    layerState: flag
  }
  addLayerData.value = params
}
function getTaskInfoById(){// 初始化数据加载
  estimateModelType.value = route.query.modelType
  estimateTool.value = true
  // showHideLegendDivBool.value = true// 打开图例面板
  if(route.query.modelType == '指数模型' || route.query.modelType == '逻辑斯蒂模型') {
    showSeismicCapacityDistributionBool.value = true // 打开烈度面板
    transcendProbabilityBool.value = false //关闭超越概率面板
  }else{
    showSeismicCapacityDistributionBool.value = false
    transcendProbabilityBool.value = true
  }
  radioIntensitySelect()
}
const mapLoading = (msg)=>{//地图查询loading
  if(msg!=null){
    proxy.$modal.loading(msg);
  }else{
    proxy.$modal.closeLoading();
  }
}
const taskGoem = ref('')
//获取任务
function getTask(){
  detailTask({ dtId:  route.query.taskId }).then((response) => {
    if(response.data.geom){
      taskGoem.value = response.data.geom
    }
  });
}
onMounted(() => {
  setTimeout(() => {
    getTask()
  },500)
  getTaskInfoById();
  if(route.query.pga){
    probabilityData.value = route.query.pga[0]
  }
})
</script>
<style scoped lang="scss">
.el-radio {
  color: white;
}
.mapDiv {
  position:absolute;top:0px;left:0px;width:100%;height:100%;
}
/*地震影响场|评估结果震级、角度选择面板*/
.earthquakeLevelAngleRadioSelectDiv {
  position: absolute;
  top: 15px;
  right: 30px;
  width: 369px;
  background-color:rgba(0,45,87,0.8)!important;
  color: white;
  padding: 15px;
  // box-shadow: 0px 0px 20px rgba(0,0,0,0.2);
  border:1px solid #707070;
  border-radius: 4px;
}
/*基础数据图层选择面板*/
.new-layerSelectDiv {
  position: absolute;
  top: 170px;
  left: 99px;
  width: 256px;
  height: 70px;
  background: #fff;
  box-shadow: 0px 0px 20px rgb(0 0 0 / 20%);
  border: 1px solid #707070;
  border-radius: 4px;
  padding: 18px;
  padding-right: 0px;
}
/*评估结果图层图例*/
.new-evaluateResultDiv {
  position: absolute;
  top: 68%;
  right: 0px;
  background: #fff;
  box-shadow: 0px 0px 20px rgb(0 0 0 / 20%);
  border: 1px solid #707070;
  border-radius: 4px;
  padding: 5px;
}
.new-evaluateResultDiv div {
  position: relative;
  height: 16px;
  line-height: 16px;
  font-size: 13px;
  margin: 8px;
}
.new-evaluateResultDiv div span {
  line-height: 16px;
  font-size: 13px;
}
.new-evaluateResultDiv div div {
  position: relative;
  top: 2px;
  left: 8px;
  width: 30px;
  height: 14px;
  margin: 0px !important;
  margin-right: 25px !important;
  display: inline-block;
}
.dataLayer {
  height: 280px;
  text-align: center;
  // width: 320px;
  position: absolute;
  top: 17px;
  left: 100px;
  // background: #001b43;
  background-color:rgba(228, 232, 237, 0.6)!important;
  .el-tree {
    margin-top: 10px;
    background: none;
    color:#000;
  }
}
//图例
.layerMap-legend {
  position: absolute;
  right: 10px;
  bottom: 10px;
  min-height: 50px;
  background: #fff;
  padding: 10px;
  overflow: auto;
  min-width: 200px;
  box-shadow: 0px 0px 20px rgba(0,0,0,0.2);
  border:1px solid #707070;
  border-radius: 4px;
}
.layerMap-legend p:first-child{
  text-align: center;font-weight: bold;
}
</style>